import React, { useState, useEffect } from "react";
import { Tabs } from "antd-mobile";
import Footer from "../../components/Footer";
import * as api from "api/index";
import "./index.scss";
import Item from "antd-mobile/es/components/dropdown/item";

function Find() {
  // 声明响应式变量 kind 
  let [kind,setKind] = useState('01');

  // 声明响应式变量 list
  let [findList, setList] = useState([
    // {
    //   description: "小仙女们最爱的泳池酒店",
    //   hashid: "e9qGD4mGWo",
    //   id: 715,
    //   imageUrl: "http://static.huruqing.cn/villa/715-15390514563501.png",
    //   kind: "推荐•路线",
    //   title: "找到了！国内最受欢迎的网红泳池酒店，我带上你，你带上钱，出发吧！",
    //   url: "#/topic/detail/e9qGD4mGWo?timeStamp=1629440613638",
    // }
  ]);

  // 请求数据
  const getFindList = () => {
    let obj = {
      kind
    }
    api.$discoverList(obj).then(res =>{
      console.log(res);
      setList(res.result);
    })
  }

  // 导航栏的事件
  const changTab = (value) => {
    console.log(value);
    setKind(value);
  } 

  // 调用请求数据的方法
  useEffect (() => {
    getFindList();
  },[kind])

<<<<<<< HEAD
=======


  
>>>>>>> 38d10f394fb302d83c68f1848f6b6e3b51ed9ef4
  return (
    <div className="find-index">
      {/* 1. 头部 */}
      <div className="top w100 bg-fff fixed">
        <Tabs onChange={changTab} activeLineMode="fixed" style={{"--fixed-active-line-width": "33%","--active-line-height": "1px",}}>
          <Tabs.Tab title="推荐•路线" key="01"></Tabs.Tab>
          <Tabs.Tab title="精品•美墅" key="02"></Tabs.Tab>
          <Tabs.Tab title="优惠•活动" key="03"></Tabs.Tab>
        </Tabs>
      </div>

      {/* 2.列表 */}
      <div className="content">
        <ul className="list">
          {findList.map((item) => (
            <li className="items bg-fff mb-10 pl-10 flex" key={item.id}>
              <img src={item.imageUrl} alt=""/>
              <div className="address ml-10 mt-15">{item.title}</div>
            </li>
          ))}
        </ul>
      </div>

      <Footer name="find" />
    </div>
  );
}

export default Find;
